<template>
  <div class="login-view">
    <div class="login-view__box">
      <div class="login-view__box__title">
        <img src="/img/z-mall-logo@2x.png" alt="标题图标" />
        <span>Z-MALL ADMIN</span>
      </div>
      <div class="login-view__box__form">
        <!--   :rules="rules" ：校验单个input 与prop配合使用 ref="loginForm" ==> 用于提交校验-->
        <el-form :model="loginForm" :rules="rules" ref="loginForm">
          <el-form-item prop="username">
            <el-input
              class="input"
              v-model="loginForm.username"
              prefix-icon="el-icon-user"
              clearable
              placeholder="请输入用户名"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              class="input password"
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              clearable
              show-password
              placeholder="请输入密码"
            >
            </el-input>
          </el-form-item>
          <el-checkbox v-model="loginForm.remember" class="rememberText"
            >记住密码
          </el-checkbox>
          <el-form-item>
            <el-button type="danger" class="submit-btn" @click="onLogin"
              >登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import * as storage from "@/utils/storage";
import { mapActions } from "vuex";

export default {
  name: "loginView",
  data() {
    // 自定义验证函数
    // 1.验证用户名
    const validateUsername = (rule, value, callback) => {
      //    rule: 规则   value：要校验的值 callback:回调函数 必须要执行
      //要求 用户名必须要以字母开头
      if (/^[a-zA-Z]/.test(value)) {
        // console.log('自定义验证函数验证用户名以字母开头 验证成功')
        return callback();
      } else {
        return callback(new Error("用户名必须要以字母开头"));
      }
    };
    //2.验证密码 的自定义验证函数
    const validatePassword = (rule, value, callback) => {
      //密码必须是纯数字
      if (/^[0-9]+$/.test(value)) {
        return callback();
      } else {
        return callback(new Error("密码必须是纯数字！"));
      }
    };

    return {
      loginForm: {
        username: "",
        password: "",
        remember: false,
      },
      rules: {
        username: [
          { validator: validateUsername, trigger: "blur" },
          { required: true, message: "用户名不能为空！", trigger: "blur" },
          { min: 5, max: 10, message: "用户名长度在5-10位！", trigger: "blur" },
        ],
        password: [
          { validator: validatePassword, trigger: "blur" },
          {
            required: true,
            message: "密码不能为空！",
            trigger: "blur",
          },
          { min: 5, max: 10, message: "密码长度在5-10位！", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapActions(["login"]),
    // 点击登录按钮 验证 是否能够通过
    async onLogin() {
      // console.log(this.$refs.loginForm.validate())
      try {
        //  this.$refs.loginForm.validate(); 返回值是Promise对象
        await this.$refs.loginForm.validate();
        console.log("验证通过");
        // 如果验证通过 就发送一个 登录认证请求 并把表单的数据带上发送出去
        {
          // // this.$api.auth(this.loginForm)  // 这个方法返回的是一个promise对象
          // // 改进上面的一行代码
          // const res = await this.$api.auth(this.loginForm);
          // // console.log('res', res)
          // //    把 res 里面data的token存进localStorage
          // storage.set("z-admin-token", res.token);
          //  引入store/index.js中actions中的登录登出方法 改进上面的代码
          await this.login(this.loginForm); // 这是个异步代码
        }

        //  记住密码功能  如果登陆成功 就把用户信息记录在本地存储
        if (this.loginForm.remember) {
          storage.set("z-admin-login", this.loginForm);
        }
        // 登陆成功的提示信息
        this.$message.success("Login Success");
        // 登陆成功之后  跳转到首页 this.$router.replace({path: '/'}) 会返回一个Promise对象
        await this.$router.replace({ path: "/" });
      } catch (e) {
        console.log("未通过验证", e);
      }
    },
  },
  created() {
    // 记住密码功能 在创建完成时 取出之前存进的登录数据
    const loginData = storage.get("z-admin-login");
    if (loginData && loginData.remember) {
      this.loginForm = loginData;
    }
  },
  watch: {
    // 监听 remember 是否 记住密码
    ["loginForm.remember"](newVal) {
      if (!newVal) {
        storage.remove("z-admin-login");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-view {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: url("https://i.niupic.com/images/2022/01/11/9T9d.png") no-repeat;
  background-size: 100% 100%;

  &__box {
    width: 442px;
    height: 422px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;

    &__title {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 48px;

      img {
        width: 44px;
        height: 44px;
        margin-right: 8px;
      }

      span {
        font-size: 20px;
        font-weight: 500;
        color: #fff;
      }
    }

    &__form {
      display: flex;
      justify-content: center;
      margin-top: 30px;

      .input {
        width: 380px;
        height: 40px;
      }

      .password {
        margin-top: 30px;
      }

      .rememberText {
        margin-top: 20px;
        margin-bottom: 30px;
      }

      .submit-btn {
        width: 100%;
      }
    }
  }
}
</style>
